<template>
    <div class="hVideo" ref="hvideoRef">
        <span ref="spanRef">历史回放</span>
        <!-- 关闭 -->
        <i @click="close"></i>
        <div class="time">
            <p>
                <b>选择相机</b>
                <b>选择开始日期</b>
                <b>选择开始时间</b>
                <b>选择结束时间</b>
            </p>
            <select @change="selectCamera" v-model="selectCameraData">
                <!-- <option value="请选择相机" >请选择相机</option> -->
                <option :value="item.uid" v-for="item in selectCameralist" :key="item.id">{{ item.title }}</option>
                <!-- <option value="2">相机2</option> -->
            </select>
            <!-- <b>选择开始时间</b> -->
            <input type="date" ref="dateRef" @change="selectDate" class="data">
            <input type="time" ref="startRef" @change="startDate" class="times">
            <input type="time" ref="endRef" @change="endDate" style="margin-left: .625rem;" class="times">
            <button style="margin-left: .375rem;" @click="changePlay">开始播放</button>
            <button @click="stopPlay">结束播放</button>
        </div>
        <video id="webrtc" ref="webrtc" autoplay>
            <!-- <source src="" type="application/x-mpegURL" /> -->
        </video>
    </div>
</template>
<script lang="ts" setup>
import kang from "../common/mitt.js"
import { reactive, ref } from 'vue'
// const props = defineProps(["isShow"]);
let selectCameraData = ref('')
let dateRef = ref()
let startRef = ref()
let endRef = ref()
let stream = ref()
let selectCameralist = reactive([
    {
        id: 0,
        title: '北停车场',
        uid: '0'
    },
    {
        id: 1,
        title: '滨湖大道桥',
        uid: '1'
    },
    {
        id: 2,
        title: '滨湖大道中',
        uid: '2'
    },
    {
        id: 3,
        title: '滨湖路',
        uid: '3'
    },
    {
        id: 4,
        title: '滨湖路口',
        uid: '4'
    },
    {
        id: 5,
        title: '图书馆',
        uid: '5'
    },
    {
        id: 6,
        title: '西北停车场',
        uid: '6'
    },
    {
        id: 7,
        title: '熏华路中',
        uid: '7'
    },
    {
        id: 8,
        title: '昭亭南路南',
        uid: '8'
    }
])
import hlsjs from "hls.js";
import http from "axios"
let close = () => {
    // alert('关闭')
    kang.emit('blockHvideo', false)
}
// 相机
let selectCamera = () => {
    // console.log(selectCameraData.value);
}
// 日期
let selectDate = (e: any) => {
    console.log(dateRef.value.value);
}
// 开始时间
let startDate = () => {
    console.log(startRef.value.value);
}
// 结束时间
let endDate = () => {
    console.log(endRef.value.value);
}
//开始播放
let changePlay = () => {
    if (selectCameraData.value == '') {
        alert('请选择相机')
        return
    }
    if (dateRef.value.value == '') {
        alert('请选择开始日期')
        return
    } else if (startRef.value.value == '') {
        alert('请选择开始时间')
        return
    } else if (endRef.value.value == '') {
        alert('请选择结束时间')
        return
    }
    // console.log(newTime(new Date().getTime()));
    console.log(selectCameraData.value);

    if (selectCameraData.value == "0") {
        ajax('34020000001110000001', '34020000001320000105')
    } else if (selectCameraData.value == "1") {
        ajax('34020000001110000001', '34020000001320000104')
    } else if (selectCameraData.value == "2") {
        ajax('34020000001110000001', '34020000001320000106')

    } else if (selectCameraData.value == "3") {
        ajax('34020000001110000001', '34020000001320000102')
    } else if (selectCameraData.value == "4") {
        ajax('34020000001110000001', '34020000001320000109')
    } else if (selectCameraData.value == "5") {
        ajax('34020000001110000001', '34020000001320000106')
    } else if (selectCameraData.value == "6") {
        ajax('34020000001110000001', '34020000001320000103')
    } else if (selectCameraData.value == "7") {
        ajax('34020000001110000001', '34020000001320000101')
    } else if (selectCameraData.value == "8") {
        ajax('34020000001110000001', '34020000001320000107')
    }
}
const stopPlay = () => {
    if (selectCameraData.value == "0") {
        stop('34020000001110000001', '34020000001320000105', stream.value)
    } else if (selectCameraData.value == "1") {
        stop('34020000001110000001', '34020000001320000104', stream.value)
    } else if (selectCameraData.value == "2") {
        stop('34020000001110000001', '34020000001320000106', stream.value)

    } else if (selectCameraData.value == "3") {
        stop('34020000001110000001', '34020000001320000102', stream.value)
    } else if (selectCameraData.value == "4") {
        stop('34020000001110000001', '34020000001320000109', stream.value)
    } else if (selectCameraData.value == "5") {
        stop('34020000001110000001', '34020000001320000106', stream.value)
    } else if (selectCameraData.value == "6") {
        stop('34020000001110000001', '34020000001320000103', stream.value)
    } else if (selectCameraData.value == "7") {
        stop('34020000001110000001', '34020000001320000101', stream.value)
    } else if (selectCameraData.value == "8") {
        stop('34020000001110000001', '34020000001320000107', stream.value)
    }
}
// 历史视频
let ajax = (deviceId: any, channelId: any) => {
    http({
        method: "get",
        url: `/api/user/login`,
        params: {
            username: "admin",
            password: "6aa6e7d0dba1b0b3e7d83ee44d5d255b",
        },
        baseURL: "api",
    })
        .then((response) => {
            console.log("登录成功", response);
        })
        .catch((error) => {
            console.log("登录失败", error);
        });
    console.log(dateRef.value.value + " " + startRef.value.value + ':00', dateRef.value.value + " " + endRef.value.value + ':00', deviceId, channelId);
    setTimeout(() => {
        http({
            method: "get",
            url: `/api/playback/start/${deviceId}/${channelId}`,
            // url: `/api/playback/start/34020000001110000001/34020000001320000103`,
            params: {
                startTime: dateRef.value.value + " " + startRef.value.value + ':00',
                endTime: dateRef.value.value + " " + endRef.value.value + ':00',
            },
            baseURL: "/api",
        })
            .then((response) => {
                console.log("历史视频成功", response.data)
                if (response) {
                    stream.value = response.data.stream
                    // console.log(response, 9991);
                    // 请求到数据
                    // HistoricalReplay.value = response;
                    // console.log(HistoricalReplay.value, "数据Ok");
                    let flvCfg1 = response.data.hls;//获取到接口中视频流地址m3u8
                    let videoFlvCfg1 = document.getElementById("webrtc");//获取到video标签（id）
                    var hls = new hlsjs();
                    hls.loadSource(flvCfg1);//视频流交给hls
                    hls.attachMedia(videoFlvCfg1);//把hls赋给了video标签
                    //播放视频
                    hls.on(hls.Events, function () {
                        videoFlvCfg1.play();
                    })
                }
            })
            .catch((error) => {
                console.log("历史视频失败", error);
            });
    }, 300)

};
let stop = (deviceId: any, channelId: any, st: any) => {

    http({
        method: "get",
        url: `/api/playback/stop/${deviceId}/${channelId}/${st}`,
        // url: `/api/playback/start/34020000001110000001/34020000001320000103`,
        // params: {
        //     startTime: dateRef.value.value + " " + startRef.value.value + ':00',
        //     endTime: dateRef.value.value + " " + endRef.value.value + ':00',
        // },
        baseURL: "/api",
    })
        .then((response) => {
            console.log("停止视频成功", response.data.stream)

        })
        .catch((error) => {
            console.log("停止历史视频失败", error);
        });


};
let newTime = (e: any) => {
    var date = new Date(e);
    var Y = date.getFullYear() + "-";
    var M =
        (date.getMonth() + 1 < 10
            ? "0" + (date.getMonth() + 1)
            : date.getMonth() + 1) + "-";
    var D =
        (date.getDate() < 10 ? "0" + date.getDate() : date.getDate()) + " ";
    var h =
        (date.getHours() < 10 ? "0" + date.getHours() : date.getHours()) + ":";
    var m =
        (date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes()) +
        ":";
    var s =
        date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
    var strDate = Y + M + D;
    // console.log("结束时间", strDate);
    return strDate;
};
</script>
<style scoped>
.hVideo {
    width: 100%;
    height: 100%;
    /* background-color: red; */
    position: relative;
    background-image: url("../assets/img/border_1.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

.hVideo i {
    position: absolute;
    cursor: pointer;
    top: .3rem;
    right: .2rem;
    width: .35rem;
    height: .35rem;
    background-image: url("../assets/img/close.png");
    background-repeat: no-repeat;
    background-size: .35rem .35rem;
    z-index: 1;
    /* background-color: red; */
}

.hVideo span {
    /* position: absolute; */
    display: block;
    width: 100%;
    height: 11%;
    line-height: .9rem;
    font-size: .25rem;
    padding-left: .1875rem;
    /* background-color: red; */
    color: #fff;
    /* cursor: move; */
}

.hVideo .time {
    width: 100%;
    height: 13%;
    background-color: rgb(175, 173, 173);
}

.hVideo select {
    margin: .125rem .25rem;
    width: 1.5rem;
    height: .55rem;
    vertical-align: middle;
    appearance: none;
    -moz-appearance: none;
    -webkit-appearance: none;
    border-radius: 5px;
    border: none;
    background: #fff;
    padding: 10px;
}

.hVideo option {
    width: 1.5rem;
    height: .5rem;
    line-height: 20px;
    font-size: .25rem;
}

.hVideo .data {
    display: inline-block;
    width: 2rem;
    height: .45rem;
    /* line-height: 50px; */
    text-align: center;
    border-radius: 10px;
    border: 2px solid transparent;
    vertical-align: middle;
    /* 边框 */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
    /* 阴影 */
    background-color: white;
    color: #000;
    font-size: .25rem;
}

.hVideo .times {
    display: inline-block;
    width: 1rem;
    height: .45rem;
    vertical-align: middle;
    margin-left: .25rem;
    /* line-height: 50px; */
    text-align: center;
    border-radius: 10px;
    border: 2px solid transparent;
    /* 边框 */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
    /* 阴影 */
    background-color: white;
    color: #000;
    font-size: .25rem;
}

.hVideo p b:nth-child(1) {
    font-size: .2rem;
    padding-left: .25rem;

}

.hVideo p b:nth-child(2) {
    font-size: .2rem;
    padding-left: 1rem;
}

.hVideo p b:nth-child(3) {
    font-size: .2rem;
    padding-left: 1.06rem;
}

.hVideo p b:nth-child(4) {
    font-size: .2rem;
    padding-left: .46rem;
}

.hVideo button {
    cursor: pointer;
    margin: 0 .125rem;
    width: 1rem;
    height: .5rem;
    vertical-align: middle;
    appearance: none;
    -moz-appearance: none;
    -webkit-appearance: none;
    border-radius: 5px;
    border: none;
    background: #fff;
}

.hVideo button:hover {
    background: #e4b654;

}

video {
    width: 100%;
    height: 75%;
    /* border: 10px solid yellow; */
    /* background-color: red; */
}
</style>